<template>
    <footer>
      <van-tabbar v-model="active"
      active-color="#faca2a"
       route>
  <van-tabbar-item replace to="/home">
    <span>首页</span>
    <template #icon="props">
      <img :src="props.active ? `${icon.homeActive}` : `${icon.homeInactive}`" />
    </template>
  </van-tabbar-item>
  <van-tabbar-item replace to="/release">
    <span>发布任务</span>
    <template #icon="props">
      <img :src="props.active ? `${icon.addActive}` : `${icon.addInactive}`" />
    </template>
    
  </van-tabbar-item>
  <van-tabbar-item replace to="/my">
    <span>我的</span>
    <template #icon="props">
      <img :src="props.active ? `${icon.myActive}` : `${icon.myInactive}`" />
    </template>
  </van-tabbar-item>
</van-tabbar>
    </footer>
</template>
<script>
import { baseURL } from '../http/require';
export default {
  data() {
    return {
      active: 0,
      icon: {
        homeActive: `${baseURL}/static/image/home-active.png`,
        homeInactive: `${baseURL}/static/image/home.png`,
        addActive: `${baseURL}/static/image/add-active.png`,
        addInactive: `${baseURL}/static/image/add.png`,
        myActive: `${baseURL}/static/image/my-active.png`,
        myInactive: `${baseURL}/static/image/my.png`,
      },
    };
  },
}
</script>

<style lang="scss" scoped>
@import '../css/reset.css';
footer {
    width: 100%;
    height: 60px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;

    .van-hairline--top-bottom {
      position: absolute;
      top: 0;
    }
    img {
      width: 30px;
      height: 30px;
    }
    span {
      font-size: 16px;
    }
  }
</style>